body {
    padding: 0;
    background-color: #000
}

.logo {
    position: absolute;
    top: 44%;
    left: 50%;
    width: 348px;
    height: 244px;
    margin-left: -174px;
    margin-top: -122px;
    border-radius: 10px
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes breathe {
    0% {
        box-shadow: 0 0 16px 3px rgba(0, 255, 0, 0.4)
    }
    100% {
        box-shadow: 0 0 16px 3px rgba(0, 255, 0, 1)
    }
}

@-webkit-keyframes breathe {
    0% {
        -webkit-box-shadow: 0 0 16px 3px rgba(0, 255, 0, 0.4)
    }
    100% {
        -webkit-box-shadow: 0 0 16px 3px rgba(0, 255, 0, 1)
    }
}

@keyframes breathe-down {
    0% {
        box-shadow: 0 0 16px 3px rgba(255, 0, 0, 0.4)
    }
    100% {
        box-shadow: 0 0 16px 3px rgba(255, 0, 0, 1)
    }
}

@-webkit-keyframes breathe-down {
    0% {
        -webkit-box-shadow: 0 0 16px 3px rgba(255, 0, 0, 0.4)
    }
    100% {
        -webkit-box-shadow: 0 0 16px 3px rgba(255, 0, 0, 1)
    }
}

.animated {
    -webkit-animation-name: fadeInDown, breathe;
    animation-name: fadeInDown, breathe;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-timing-function: ease-in, ease-in-out;
    animation-timing-function: ease-in, ease-in-out;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
    -webkit-animation-duration: 2s, 2s;
    animation-duration: 2s, 2s;
    -webkit-animation-delay: 0s, 0s;
    animation-delay: 0s, 0s
}

